<template>
	<div class="swiperbox" ref="swiperbox"  :class="bg">

        <div class="wrap">
            <div></div>
        </div>
        <van-swipe class="my-swipe" @change="onChange"  :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="bg in bgImg" :key="bg.id">
                    <img :src="bg.url" >
                </van-swipe-item>
            </van-swipe>
	</div>
</template>
<script setup>
    import { getCurrentInstance, onMounted, ref } from 'vue';
    import url1 from '../../../images/banner0.jpg'
    import url2 from '../../../images/banner1.jpg'
    import url3 from '../../../images/banner2.jpg'
    // let div =null
    // onMounted(()=>{
    //     div = getCurrentInstance()
    // })
    const bg =ref('bg0')
    function onChange(index){
       bg.value = 'bg'+index
    }
    const bgImg= [{
        url:url1,
        id:0,
    },
    {
        url:url2,
        id:1,
    },
    {
        url:url3,
        id:2,
    },
    ]
</script>
<style lang="less" scoped>
    .swiperbox{
        width: 100%;
        height: 200px;
        position: relative;
        background-color: rgb(240, 238, 238);
        background-size: 100% 90%;
        background-repeat: no-repeat;
        .wrap{
            background: rgba(0,0,0,0.1);
            position: absolute;
            display: flex;
            flex-direction: row-reverse;
            height: 180px;
            width: 100%;
            div{
                height: 50px;
                width: 50px;
                background: url(../../../images/icons/saoyisao.png) center center /28px 28px no-repeat;

            }
            // margin-bottom: 20px;

            
        }
        .my-swipe{
                color: #fff;
                font-size: 20px;
                line-height: 150px;
                text-align: center;
                padding-top: 50px;
            }
            .van-swipe-item {
                line-height: 150px;
                text-align: center;
                width: 100%;
                height: 150px;
                img{

                    width: 94%;
                    height: 100%;
                }
            }

        }
        .bg0{
            background-image:url(../../../images/banner0.jpg)  ;            
        }
        .bg1{
            background-image:url(../../../images/banner1.jpg) ;
        }
        .bg2{
            background-image:url(../../../images/banner2.jpg) ;
        }


</style>>


